<template>
  <div class="course-manager">
    <!-- 标题区 -->
    <div class="header-section">
      <h1>课程管理</h1>
      <!-- 绑定点击事件 -->
      <button class="create-btn" @click="showCreateForm = true">
        <i class="material-icons">add</i>新建课程
      </button>
      <CourseForm 
        v-if="showCreateForm"
        @save="handleSave"
        @cancel="showCreateForm = false"
      />
    </div>

    <!-- 筛选搜索区 -->
    <div class="filter-section">
      <div class="filter-group">
        <select class="filter-select">
          <option>全部学科</option>
        </select>
        <select class="filter-select">
          <option>全部年级</option>
        </select>
      </div>
      <div class="search-box">
        <input
          type="text"
          placeholder="搜索课程..."
        >
      </div>
    </div>

    <!-- 课程列表区 -->
    <div class="course-table">
      <table>
        <thead>
          <tr>
            <th>课程名称</th>
            <th>学科</th>
            <th>年级</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>星际数学基础</td>
            <td>数学</td>
            <td>一年级</td>
            <td class="action-cell">
              <button class="edit-btn" @click="handleEdit">
                <i class="material-icons">edit</i>
              </button>
              <button class="delete-btn" @click="handleDelete">
                <i class="material-icons">delete</i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 编辑课程对话框 -->
    <div class="edit-dialog" v-if="showEditForm">
      <div class="dialog-overlay" @click="cancelEdit"></div>
      <div class="dialog-content">
        <h3>编辑课程</h3>
        <div class="form-group">
          <label>课程名称</label>
          <input type="text" v-model="editingCourse.name">
        </div>
        <div class="form-group">
          <label>学科</label>
          <input type="text" v-model="editingCourse.subject">
        </div>
        <div class="form-group">
          <label>年级</label>
          <input type="text" v-model="editingCourse.grade">
        </div>
        <div class="form-group">
          <label>课程描述</label>
          <textarea v-model="editingCourse.description"></textarea>
        </div>
        <div class="dialog-actions">
          <button class="cancel-btn" @click="cancelEdit">取消</button>
          <button class="confirm-btn" @click="confirmEdit">确认修改</button>
        </div>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <div class="delete-dialog" v-if="showDeleteDialog">
      <div class="dialog-overlay" @click="cancelDelete"></div>
      <div class="dialog-content">
        <h3>确认删除课程</h3>
        <div class="form-group">
          <label>课程名称</label>
          <div class="preview-text">{{ deletingCourse.name }}</div>
        </div>
        <div class="form-group">
          <label>学科</label>
          <div class="preview-text">{{ deletingCourse.subject }}</div>
        </div>
        <div class="form-group">
          <label>年级</label>
          <div class="preview-text">{{ deletingCourse.grade }}</div>
        </div>
        <div class="form-group">
          <label>课程描述</label>
          <div class="preview-text">{{ deletingCourse.description }}</div>
        </div>
        <div class="dialog-actions">
          <button class="cancel-btn" @click="cancelDelete">取消</button>
          <button class="confirm-btn" @click="confirmDelete">确认删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import CourseForm from './CourseForm.vue'

const isLightTheme = ref(false)
const showCreateForm = ref(false)
const showEditForm = ref(false)
const editingCourse = ref({
  name: '',
  subject: '',
  grade: '',
  description: ''
})

const handleSave = (courseData) => {
  console.log('保存课程:', courseData)
  showCreateForm.value = false
}

const handleEdit = () => {
  // 这里可以设置当前编辑的课程数据
  editingCourse.value = {
    name: '星际数学基础',
    subject: '数学',
    grade: '一年级',
    description: '基础数学课程'
  }
  showEditForm.value = true
}

const confirmEdit = () => {
  console.log('确认编辑:', editingCourse.value)
  showEditForm.value = false
}

const cancelEdit = () => {
  showEditForm.value = false
}

const showDeleteDialog = ref(false)
const deletingCourse = ref({
  name: '',
  subject: '', 
  grade: '',
  description: ''
})

const handleDelete = () => {
  deletingCourse.value = {
    name: '星际数学基础',
    subject: '数学',
    grade: '一年级',
    description: '基础数学课程'
  }
  showDeleteDialog.value = true
}

const confirmDelete = () => {
  console.log('确认删除课程:', deletingCourse.value)
  showDeleteDialog.value = false
}

const cancelDelete = () => {
  showDeleteDialog.value = false
}

const handleThemeChange = (isLight) => {
  isLightTheme.value = isLight
}

onMounted(() => {
  window.addEventListener('theme-change', (e) => {
    handleThemeChange(e.detail)
  })
})

onUnmounted(() => {
  window.removeEventListener('theme-change', handleThemeChange)
})
</script>

<style scoped>
.course-manager {
  padding: 2rem;
  min-height: calc(100vh - 70px);
  /* background-color: #1a1a1a; */
  color: white;
}

/* 浅色主题样式 */
.course-manager.light-theme {
  background-color: #f5f5f5;
  color: #333;
}

.light-theme .filter-section,
.light-theme .course-table,
.light-theme .edit-dialog .dialog-content,
.light-theme .delete-dialog .dialog-content {
  background: #fff;
  color: #333;
}

.light-theme .filter-select,
.light-theme .search-box input,
.light-theme .edit-dialog input,
.light-theme .edit-dialog textarea {
  background: #fff;
  border: 1px solid #ddd;
  color: #333;
}

.light-theme .course-table th {
  background: #f0f0f0;
  color: #333;
}

.light-theme .course-table td {
  border-bottom: 1px solid #eee;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header-section h1 {
  font-size: 24px;
  font-weight: 700;
}

.create-btn {
  background: #8b5cf6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  background: #252525;
  padding: 1rem;
  border-radius: 8px;
}

.filter-group {
  display: flex;
  gap: 1rem;
}

.filter-select {
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 0.5rem;
  border-radius: 4px;
}

.search-box input {
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  width: 200px;
}

.course-table {
  background: #252525;
  border-radius: 8px;
  overflow: hidden;
}

.course-table table {
  width: 100%;
  border-collapse: collapse;
}

.course-table th {
  text-align: left;
  padding: 1rem;
  background: #333;
}

.course-table td {
  padding: 1rem;
  border-bottom: 1px solid #333;
}

.action-cell {
  display: flex;
  gap: 0.5rem;
}

.edit-btn {
  color: #8b5cf6;
  background: transparent;
  border: none;
  cursor: pointer;
}

.delete-btn {
  color: #ff4757;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* 编辑对话框样式 */
.edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-dialog .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.edit-dialog .dialog-content {
  background: #252525;
  padding: 2rem;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  z-index: 1001;
}

.edit-dialog .form-group {
  margin-bottom: 1rem;
}

.edit-dialog .form-group label {
  display: block;
  margin-bottom: 0.5rem;
}

.edit-dialog .form-group input,
.edit-dialog .form-group textarea {
  width: 100%;
  padding: 0.5rem;
  background: #333;
  border: 1px solid #444;
  color: white;
  border-radius: 4px;
}

.edit-dialog .form-group textarea {
  min-height: 100px;
}

.edit-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.edit-dialog .cancel-btn {
  background: #444;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-dialog .confirm-btn {
  background: #8b5cf6;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 删除对话框样式 */
.delete-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.delete-dialog .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.delete-dialog .dialog-content {
  background: #252525;
  padding: 2rem;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  z-index: 1001;
  border: 1px solid #ff4757;
}

.delete-dialog .form-group {
  margin-bottom: 1rem;
}

.delete-dialog .preview-text {
  padding: 0.5rem;
  background: #333;
  border-radius: 4px;
}

.delete-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.delete-dialog .cancel-btn {
  background: #444;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-dialog .confirm-btn {
  background: #ff4757;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>